<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        权限管理
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../backstage/css/x-admin.css" media="all">
</head>

<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a><cite>首页</cite></a>
        <a><cite>权限管理</cite></a>
        <a><cite>管理员列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>
<div class="x-body">
    <form class="layui-form x-center" action="" style="width:80%">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item" style="margin-left:5px;">
                <label class="layui-form-label">选择状态</label>

                <div class="layui-input-inline">
                    <select id="state" name="state">
                        <option value="有效">有效</option>
                        <option value="无效">无效</option>
                    </select>
                </div>

                <div class="layui-input-inline">
                    <input type="text" name="userId" placeholder="请输入用户ID" class="layui-input"
                           maxlength="10" onkeyup="value=this.value.replace(/\D+/g,'')">
                </div>

                <div class="layui-input-inline" style="width:80px">

                    <input type="button" id="search" class="layui-btn" value="搜索" >
                    </input>
                </div>
            </div>
        </div>
    </form>

    <form class="layui-form x-center" action="" style="width:80%">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item" style="margin-left:5px;">
                <label class="layui-form-label">权限id查询</label>
                <div class="layui-input-inline">
                    <input id="powerId" type="text" name="powerId" placeholder="请输入权限ID" class="layui-input"
                           maxlength="10" onkeyup="value=this.value.replace(/\D+/g,'')">
                </div>

                <div class="layui-input-inline" style="width:80px">

                    <input type="button" id="search1" class="layui-btn" value="搜索" >
                    </input>
                </div>
            </div>
        </div>
    </form>

    <div id="block">
        <button id="edit"class="layui-btn layui-btn-danger" onclick="admin_edit('修改权限','${path}/admin/powerEdit','','500','500');">
            <i class="layui-icon">&#xe642;</i>修改
        </button>
        <button class="layui-btn" onclick="admin_add('添加权限','${path}/admin/powerAdd','600','500')">
            <i class="layui-icon">&#xe608;</i>添加
        </button>
    </div>

    <table class="layui-table">
        <thead>
        <tr>
            <th>权限ID</th>
            <th>用户ID</th>
            <th>权限</th>
            <th>状态</th>
            <th>更新时间</th>
        </tr>
        </thead>
        <tbody id="power_tbody">
        <tr>
            <%--<td>1</td>--%>
            <%--<td>1</td>--%>
            <%--<td>超级管理员</td>--%>
            <%--<td>有效</td>--%>
            <%--<td >2018-01-01 11:11:42</td>--%>
        </tr>
        </tbody>
    </table>
    <div id="page" style="margin-left: 650px;"></div>
</div>
<script type="text/javascript" src="../../../backstage/js/jquery.min.js"></script>
<script src="../../../backstage/lib/layui/layui.js" charset="utf-8"></script>
<script src="../../../backstage/js/x-layui.js" charset="utf-8"></script>
<script>

    layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function() {
        $ = layui.jquery; //jquery
        laydate = layui.laydate; //日期插件
        lement = layui.element(); //面包导航
        laypage = layui.laypage; //分页
        layer = layui.layer; //弹出层
        form = layui.form(); //弹出层(下拉列表)


        //分页设置
        laypage({
            //分页需要显示的地方，即上面的div里的id
            cont: 'page',
            //总页数
            pages: 100,
            first: 1,
            last: 100,
            //若不显示，设置false即可
            prev: '<em><</em>',
            //若不显示，设置false即可
            next: '<em>></em>'
        });

    });


    // 添加
    function admin_add(title, url, w, h) {
        x_admin_show(title, url, w, h);
    }
    // 编辑
    function admin_edit(title, url, id, w, h) {
        x_admin_show(title, url, w, h);
    }

    //显示权限详情
    $("#search").click(function () {
        var userId = $.trim($("#userId").val());
        var state = $.trim($("#state").val());

        $.ajax({
            type: 'POST',
            url: '/power/searchPower',
            dataType: "json",
            data: {uid: userId, state: state},
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                console.log(result);
                var str = '';
                for (var key in result) {
                    for (i = 0; i < result[key].length; i++) {
                        str += '<tr>';
                        str += '  <td>' + result[key][i].id + '</td>';
                        str += '  <td>' + result[key][i].user.id + '</td>';
                        str += '  <td>' + result[key][i].power + '</td>';
                        str += '  <td>' + result[key][i].state + '</td>';
                        str += '  <td>' + new Date(result[key][i].updateDate ).toLocaleDateString().replace(/\//g, "-") + " " + new Date(result[key][i].updateDate ).toTimeString().substr(0, 8)+ '</td>';
                        str += '</tr>';
                    }
                }
                $('#power_tbody').html(str);
            }
        });
    });

    //根据权限id查询
    $("#search1").click(function () {
        var powerId = $.trim($("#powerId").val());

        $.ajax({
            type: 'POST',
            url: '/power/showPower',
            dataType: "json",
            data: {powerId: powerId},
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                console.log(result);
                var str = '';

                str += '<tr>';
                str += '  <td>' + result.msg.id + '</td>';
                str += '  <td>' + result.msg.user.id + '</td>';
                str += '  <td>' + result.msg.power + '</td>';
                str += '  <td>' + result.msg.state + '</td>';
                str += '  <td>' + new Date(result.msg.updateDate).toLocaleDateString().replace(/\//g, "-") + " " + new Date(result.msg.updateDate ).toTimeString().substr(0, 8)+ '</td>';
                str += '</tr>';

                $('#power_tbody').html(str);

            }
        });
    });

</script>
</body>

</html>